<template>
    <div class="assignment-area">
        <h2 class="title">试卷布置</h2>

        <!-- 试卷标题和描述 -->
        <div class="mid-section">
            <div class="form-item">
                <label for="exam-title">试卷标题</label>
                <input id="exam-title" type="text" v-model="examTitle" placeholder="请输入试卷标题" />
            </div>

            <div class="form-item">
                <label for="exam-description">试卷描述</label>
                <textarea id="exam-description" v-model="examDescription" placeholder="请输入试卷描述"></textarea>
            </div>

            <!-- 试卷题目区域 -->
            <div class="question-section">
                <div class="form-item">
                    <label for="question-type">题目类型</label>
                    <select id="question-type" v-model="selectedQuestionType">
                        <option value="single_choice">单选题</option>
                        <option value="multiple_choice">多选题</option>
                        <option value="fill_in_the_blank">填空题</option>
                        <option value="short_answer">问答题</option>
                    </select>
                    <button class="add-btn" @click="addQuestion">+</button>
                </div>

                <!-- 动态题目部分 -->
                <div class="questions-container">
                    <div v-for="(question, index) in questions" :key="index" class="question-block">
                        <h4 class="question-title">题目 {{ index + 1 }}</h4>
                        <div class="form-item">
                            <label>题目</label>
                            <input type="text" v-model="question.title" placeholder="请输入题目" />
                        </div>

                        <!-- 选项输入，仅在选择题时显示 -->
                        <div v-if="['single_choice', 'multiple_choice'].includes(question.type)" class="form-item">
                            <label>选项</label>
                            <textarea v-model="question.options" placeholder="请输入选项，使用 === 分隔"></textarea>
                        </div>

                        <div class="form-item">
                            <label>答案</label>
                            <input type="text" v-model="question.answer" placeholder="请输入答案" />
                        </div>

                        <div class="form-item">
                            <label>分值</label>
                            <input type="number" v-model="question.score" placeholder="请输入分值" />
                        </div>

                        <!-- 删除按钮 -->
                        <button class="delete-btn" @click="deleteQuestion(index)">删除</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 上传试卷按钮 -->
        <div class="upload-btn-container">
            <button class="upload-btn" @click="uploadExam">上传试卷</button>
        </div>
    </div>
</template>



<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router/composables';  // 导入 useRoute 用于获取路由参数
import axios from 'axios';

// 获取路由参数 courseId
const route = useRoute();
const courseId = ref(route.params.courseId);  // 从路由参数中提取 courseId
console.log(route.params.courseId)

// 试卷标题和描述
const examTitle = ref('');
const examDescription = ref('');

// 当前选中的题目类型
const selectedQuestionType = ref('single_choice');

// 动态保存题目信息
const questions = ref([]);

// 添加题目
function addQuestion() {
    questions.value.push({
        type: selectedQuestionType.value, // 题目类型
        title: '', // 题目
        options: '', // 选项，仅选择题时使用
        answer: '', // 答案
        score: 0, // 分值
    });
}

// 删除题目
function deleteQuestion(index) {
    questions.value.splice(index, 1);
}

// 上传试卷的函数
function uploadExam() {
    // 创建上传的试卷数据
    const examData = {
        courseId: courseId.value,  // 添加 courseId
        name: examTitle.value,
        description: examDescription.value,
        questions: questions.value.map(q => {
            return {
                type: q.type,
                content: q.title,
                options: q.type === 'single_choice' || q.type === 'multiple_choice' ? q.options.split('===').map(option => option.trim()) : [], // 使用 === 分隔选项
                answer: q.answer.split(',').map(ans => ans.trim()),
                score: q.score
            };
        })
    };

    // 模拟 POST 请求
    console.log('上传的试卷数据：', examData);

    // 调用实际的 POST 接口
    axios.post('/exam/createPaper', examData)
        .then(response => {
            console.log('上传成功:', response);
            alert('试卷上传成功!');
        })
        .catch(error => {
            console.error('上传失败:', error);
            alert('试卷上传失败，请重试。');
        });
}
</script>



<style scoped>
.assignment-area {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.mid-section {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #fcfcfc;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.title {
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 20px;
}

.question-section {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #fff;
    height: 400px;
    overflow-y: auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
    margin-bottom: 15px;
    text-align: left;
}

label {
    font-size: 18px;
    margin-right: 10px;
}

input,
textarea,
select {
    width: 99%;
    padding: 10px;
    font-size: 16px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

textarea {
    resize: vertical;
    height: 80px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #8ab4f8;
    box-shadow: 0px 0px 8px rgba(138, 180, 248, 0.6);
    outline: none;
}

.add-btn {
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    padding: 5px 10px;
    color: white;
    background-color: #4caf50;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-btn:hover {
    background-color: #45a049;
}

.upload-btn-container {
    margin-top: 20px;
}

.upload-btn {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px;
    color: white;
    background-color: #4caf50;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.upload-btn:hover {
    background-color: #45a049;
}

.questions-container {
    margin-top: 15px;
}

.question-block {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fcfcfc;
}

.question-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.delete-btn {
    font-size: 16px;
    color: #fff;
    background-color: #f44336;
    border: none;
    padding: 5px 10px;
    margin-top: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.delete-btn:hover {
    background-color: #d32f2f;
}
</style>
